<template>
  <Dialog
    :show="show"
    :isH5="!isPC"
    :isHeaderShow="false"
    :isFooterShow="false"
    :background="false"
    @update:show="toggleShow"
  >
    <Transfer
      :isSearch="true"
      :title="title"
      :list="searchMemberList"
      :isH5="!isPC"
      :isRadio="false"
      @search="search"
      @submit="submit"
      @cancel="cancel"
    />
  </Dialog>
</template>
<script setup lang="ts">
import {
  TUIGroupService,
  TUIUserService,
} from "@tencentcloud/chat-uikit-engine";
import { ref, computed, watch } from "../../../../adapter-vue";
import Dialog from "../../../common/Dialog/index.vue";
import Transfer from "../../../common/Transfer/index.vue";
import { isPC } from "../../../../utils/env";

const props = defineProps({
  // 类型: voiceCall/groupCall/...
  type: {
    type: String,
    default: "",
  },
  currentConversation: {
    type: Object,
    default: {},
  },
  isGroup: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["submit", "cancel"]);
const show = ref<boolean>(false);
const groupID = ref<string>("");
const memberList = ref<Array<any>>([]);
const searchMemberList = ref<Array<any>>([]);
const selfUserID = ref<string>("");
const titleMap: any = {
  voiceCall: "发起群语音",
  videoCall: "发起群视频",
};
const title = computed(() => {
  return titleMap[props.type] ? titleMap[props.type] : "";
});

TUIUserService.getUserProfile().then((res: any) => {
  if (res?.data?.userID) {
    selfUserID.value = res.data.userID;
  }
});

watch(
  () => [props?.currentConversation?.conversationID, show.value],
  (newVal: any, oldVal: any) => {
    if (newVal && newVal !== oldVal) {
      if (props.isGroup && show.value) {
        groupID.value = props.currentConversation.groupProfile.groupID;
        TUIGroupService.getGroupMemberList({
          groupID: groupID.value,
        }).then((res: any) => {
          memberList.value = res?.data?.memberList?.filter(
            (user: any) => user?.userID !== selfUserID.value
          );
          searchMemberList.value = memberList.value;
        });
      } else {
        groupID.value = "";
        memberList.value = [];
        searchMemberList.value = memberList.value;
      }
    }
  },
  {
    immediate: true,
  }
);

const search = (searchInfo: string) => {
  const results = memberList.value?.filter(
    (member: any) => member?.userID === searchInfo
  );
  searchMemberList.value = results?.length ? results : memberList.value;
};

const submit = (selectedMemberList: Array<string>) => {
  const userIDList: Array<string> = [];
  selectedMemberList?.forEach((user: any) => {
    user?.userID && userIDList.push(user.userID);
  });
  if (props.type === "voiceCall") {
    emits("submit", { userIDList, groupID: groupID.value, type: 1 });
  } else if (props.type === "videoCall") {
    emits("submit", { userIDList, groupID: groupID.value, type: 2 });
  }
  searchMemberList.value = memberList.value;
  toggleShow(false);
};

const cancel = () => {
  searchMemberList.value = memberList.value;
  emits("cancel");
  toggleShow(false);
};

const toggleShow = (showStatus: boolean) => {
  show.value = showStatus;
};

defineExpose({
  toggleShow,
});
</script>
<style lang="scss" scoped></style>
